<template>
	<div>
		<el-container class="home-container">
			<el-header class="home-header">
				<span class="home-title">社区服务系统</span>
				<div style="display: flex;align-items: center;margin-right: 7px">
					<div>
						<el-upload
								class="avatar-uploader"
								:action=this.getAvatar
                                accept="image/*"
								:with-credentials="true"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
							<el-avatar v-if="this.user.avatar" :size="25" :src="this.getBaseUrl+''+this.user.avatar" class="demo-basic--circle">
							</el-avatar>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div v-if="!this.user">
						<router-link to="/login">登录</router-link>
					</div>
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link home_ushering" style="display: flex;align-items: center">
							{{this.user.username}}
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="handlePersonalInfo">个人中心</el-dropdown-item>
							<el-dropdown-item command="changePass">修改密码</el-dropdown-item>
							<el-dropdown-item command="logout" divided>注销</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<el-container>
				<el-aside width="180px" class="home-aside">
					<div style="display: flex;justify-content: flex-start;width: 180px;text-align: left;">
						<el-menu style="background: #ececec;width: 180px;" unique-opened router>
							<template v-for="(item,index) in menus">
								<el-submenu :key="index" :index="index+''">
									<template slot="title">
										<span slot="title">{{item.name}}</span>
									</template>
									<el-menu-item
											width="180px"
											style="padding-left: 30px;padding-right:0px;margin-left: 0px;width: 170px;text-align: left"
											v-for="child in item.childMenu"
											:index="child.path"
											:key="child.path">
										{{child.name}}
									</el-menu-item>
								</el-submenu>
							</template>
						</el-menu>
					</div>
				</el-aside>
				<el-main>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '#' }">首页</el-breadcrumb-item>
						<el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
					</el-breadcrumb>

					<router-view></router-view>

				</el-main>
				<el-aside width="180px">
					<div class="block">
						<el-carousel height="650px" direction="vertical">
							<el-carousel-item v-for="url in urls" :key="url">
								<el-image style="width: 100%; height: 100%" :src="url" />
							</el-carousel-item>
						</el-carousel>
					</div>
				</el-aside>
			</el-container>
		</el-container>
		<!--弹出框-->
		<div>
			<el-dialog title="修改密码" :visible.sync="ucpData.visible" width="30%">
				<el-form :model="ucpData.form" status-icon :rules="ucpData.rules" ref="passForm" v-loading="ucpData.loading">
					<el-form-item label="旧密码" prop="oldPassword" :label-width="formLabelWidth">
						<el-input type="password" v-model="ucpData.form.oldPassword" autocomplete="off" placeholder="密码"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="password" :label-width="formLabelWidth">
						<el-input type="password" v-model="ucpData.form.password" autocomplete="off" placeholder="密码"></el-input>
					</el-form-item>
					<el-form-item label="确认新密码" prop="rePassword" :label-width="formLabelWidth">
						<el-input type="password" v-model="ucpData.form.rePassword" autocomplete="off" placeholder="密码"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="ucpData.visible = false">取 消</el-button>
					<el-button type="primary" @click="handleEdit" >确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<div>
			<el-dialog title="个人中心" :visible.sync="uciData.visible" width="30%">
				<el-form :model="uciData.form" status-icon :rules="uciData.rules" ref="infoForm" v-loading="uciData.loading">
					<el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
						<el-input type="age" v-model.number="uciData.form.age" autocomplete="off" placeholder="请输入年龄"></el-input>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth">
						<el-radio-group v-model="uciData.form.sex">
							<el-radio :label="0">女</el-radio>
							<el-radio :label="1">男</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="职业" prop="job" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="uciData.form.job" autocomplete="off" placeholder="请输入职业"></el-input>
					</el-form-item>
					<el-form-item label="爱好" prop="hobby" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="uciData.form.hobby" autocomplete="off" placeholder="请输入爱好"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="mobile" :label-width="formLabelWidth">
						<el-input type="text" v-model.number="uciData.form.mobile" autocomplete="off" placeholder="请输入手机号码"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
						<el-input type="email" v-model="uciData.form.email" autocomplete="off" placeholder="请输入邮箱" disabled></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="uciData.visible = false">取 消</el-button>
					<el-button type="primary" @click="handlePersonalInfo" >确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>

	export default {
		name:"index",
		data(){
			const validatePass = (rule, value, callback) => {
				if (value === this.ucpData.form.oldPassword) {
					callback(new Error('新旧密码相同'));
				}else {
					callback();
				}
			};
			const validateRePass = (rule, value, callback) => {
				if (value !== this.ucpData.form.password) {
					callback(new Error('两次输入密码不一致!'));
				}else {
					callback();
				}
			};
			const checkMobile = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('手机号不能为空'));
				} else {
					const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
					console.log(reg.test(value));
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error('请输入正确的手机号'));
					}
				}
			};

			return {
				formLabelWidth: '120px',
				urls: [require('@/assets/asideimg/03.png'),require('@/assets/asideimg/04.png')
					,require('@/assets/asideimg/05.png'),require('@/assets/asideimg/06.png')
					,require('@/assets/asideimg/07.png')],
				ucpData: {
					visible: false,
					loading: false,
					form: {
						password: '',
						oldPassword: '',
						rePassword: ''
					},
					rules: {
						password: [
							{ required: true, message: '请输入新密码', trigger: 'blur' },
							{ min: 3, message: '长度不少于 3 ', trigger: 'blur' },
							{ validator: validatePass, trigger: 'blur' }
						],
						oldPassword: [
							{ required: true, message: '请输旧入密码', trigger: 'blur' },
							{ min: 3, message: '长度不少于 3 ', trigger: 'blur' }
						],
						rePassword: [
							{ required: true, message: '请输入确认密码', trigger: 'blur' },
							{ min: 3, message: '长度不少于 3 ', trigger: 'blur' },
							{ validator: validateRePass, trigger: 'blur' }
						]
					}
				},
				uciData: {
					visible: false,
					loading: false,
					form: {
						sex: 0,
						hobby: "",
						mobile: "",
						job: "",
						age: 0,
						email: "",
					},
					rules: {
						hobby: [
							{ required: true, message: '爱好', trigger: 'blur' },
						],
						job: [
							{ required: true, message: '职业', trigger: 'blur' },
						],
						mobile: [
							{ required: true, message: '手机号码', trigger: 'blur' },
							{ validator: checkMobile, trigger: 'blur' }
						],
						email: [
							{ required: true, message: '邮箱', trigger: 'blur' },
							{ type: 'email', message: '邮箱格式不符'}
						],
						age: [
							{ required: true, message: '年龄不能为空'},
							{ type: 'number', message: '年龄必须为数字值'}
						],
					}
				},
			}
		},
		computed:{
			user(){
				return this.$store.state.user;
			},
			menus: function () {
				return this.$store.state.menu.filter(function (cur) {
					return !cur.hidden
				})
			},
			getBaseUrl(){
				return this.$store.getters.getBaseUrl;
			},
			getAvatar(){
				return this.getBaseUrl+'/upload/avatar';
			}

		},
		methods:{
			handleCommand(cmd){
				const _this = this;
				if (cmd === 'logout') {
					this.$confirm('注销登录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						_this.getRequest("/logout");
						_this.$store.commit('logout');
						_this.$router.replace({path: '/login'});
					}).catch(() => {
						_this.$message({
							type: 'info',
							message: '取消'
						});
					});
				}else if (cmd === 'changePass'){
					this.ucpData.visible=true;
				}else if (cmd === 'handlePersonalInfo'){
					this.uciData.form={
						sex: this.user.sex,
						hobby: this.user.hobby,
						mobile: this.user.mobile,
						job: this.user.job,
						age: this.user.age,
						email: this.user.email,
					};
					this.uciData.visible=true;
				}
			},
			handleEdit() {
				const _this = this;
				this.$refs.passForm.validate((valid) => {
					if (valid){
						//提交用户密码修改信息
						_this.ucpData.loading=true;
						let userVo={
							password: _this.ucpData.form.password,
							oldPassword: _this.ucpData.form.oldPassword,
						};
						_this.putRequestJson("/user/changepass",userVo)
								.then(resp =>{
									if (resp && resp.data && resp.data.code === '200') {
										_this.ucpData.loading=false;
										_this.ucpData.visible=false;
										//清空数据
										_this.ucpData.form={
											password: '',
											oldPassword: '',
											rePassword: ''
										};
									}
								})
					}
				});
			},
			handlePersonalInfo(){
				const _this = this;
				this.$refs.infoForm.validate((valid) => {
					if (valid){
						//提交用户个人修改信息
						_this.uciData.loading=true;
						let userVo=_this.uciData.form;
						_this.putRequestJson("/user/changeinfo",userVo)
								.then(resp =>{
									if (resp && resp.data && resp.data.code === '200') {
										_this.uciData.loading=false;
										_this.uciData.visible=false;
										//更新本地个人信息
										this.$store.commit('changeUserPersonalInfo',_this.uciData.form);
									}
								})
					}
				});
			},
			handleAvatarSuccess(response) {
				//更新用户头像
				let avatar=response.result;
				this.$store.commit('changeUserAvatar',avatar);
                this.$message.success(response.msg);
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
		},
		mounted(){

		}
	}
</script>
<style  scoped>
	.home-container {
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
	}

	.home-header {
		background-color: #20a0ff;
		color: #333;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: content-box;
		padding: 0px;
	}

	.home-aside {
		background-color: #ECECEC;
	}

	.home-main {
		background-color: #fff;
		color: #000;
		text-align: center;
		margin: 0px;
		padding: 0px;;
	}

	.home-title {
		color: #fff;
		font-size: 22px;
		display: inline;
		margin-left: 8px;
	}

	.el-submenu .el-menu-item {
		width: 180px;
		min-width: 175px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		align-content: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 25px;
		height: 25px;
		text-align: center;
	}
	.avatar {
		width: 25px;
		height: 25px;
		display: block;
	}
</style>